<template>
  <el-button type="primary" @click="tableRef?.submit()">提交</el-button>
  <AdTableForm v-bind="tableConfig" ref="tableRef" v-model="models"></AdTableForm>
</template>
<script lang="ts" setup>
import type { AdTableFormInstance, AdTableFormPorps } from '@fe-hl/admin-design-vue';
import { cloneDeep } from 'lodash-es';

import { ref } from 'vue';
import data from './data';
interface Models {
  keyword: string;
  mercId: string;
  status: string;
}
const models = ref<Models>();

const tableRef = ref<AdTableFormInstance>();
const tableConfig = ref<AdTableFormPorps>({
  api: () => Promise.resolve(cloneDeep(data)), // 模拟ajax请求
  showAdded: false,
  showDelete: false,
  columns: [
    {
      label: '姓名',
      prop: 'name',
      components: 'el-input',
      props: {
        rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      },
    },
    {
      label: '年龄',
      prop: 'age',
      components: 'el-input',
      props: {
        rules: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
      },
    },
    {
      label: '性别',
      prop: 'sex',
      components: 'el-switch',
      props: {
        inlinePrompt: true,
        activeText: '男',
        inactiveText: '女',
        activeValue: '0',
        inactiveValue: '1',
        style: '--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66',
        rules: [{ required: true, message: '请选择年龄', trigger: 'blur' }],
      },
    },
    {
      label: '地址',
      prop: 'address',
      components: 'el-input',
    },
    {
      label: '状态',
      prop: 'status',
      components: 'el-select',
      subComponents: 'el-option',
      options: [
        {
          label: '启用',
          value: '1',
        },
        {
          label: '禁用',
          value: '0',
        },
      ],
      props: {
        defaultValue: '1',
        rules: [{ required: true, message: '请选择状态', trigger: ['blur', 'change'] }],
      },
    },
    {
      label: '商户号',
      prop: 'mchId',
      components: 'el-select',
      subComponents: 'el-option',
      optionsLabelKey: 'name',
      optionsValueKey: 'id',
      optionsRule: (row: Record<string, any>, index: number) => {
        if (index == 0) {
          return [
            {
              id: '10000',
              name: '商户1',
              code: 'SH10000',
            },
          ];
        } else {
          return [
            {
              id: '20000',
              name: '商户2',
              code: 'SH20000',
            },
            {
              id: '10002',
              name: '商户3',
              code: 'SH30000',
            },
          ];
        }
      },
      options: [],
      props: {
        rules: [{ required: true, message: '请选择商户', trigger: ['blur', 'change'] }],
      },
      events: {
        change: (model: Record<string, any>, data: Record<string, any>) => {
          model.code = data ? data.code : '';
        },
      },
    },
    {
      label: '商户编码',
      prop: 'code',
    },
  ],
  submit: (list: Array<any>) => {
    // api
    console.log(list);
  },
});
</script>
